<template>
  <div>
    <div class="bottom">
      <div class="phone"> <a href="tel:186-6484-1268">电话联系</a> </div>
      <div class="location" @click="copyWx">添加微信号</div>
    </div>
  </div>
</template>

<script>
export default {
  name:'contact',
  data(){
    return {
      wx:'18565311419'
    }
  },
  methods: {
    copyWx(){
        // 模拟 输入框
        var cInput = document.createElement("input");
        cInput.value = this.wx;
        document.body.appendChild(cInput);
        cInput.select();// 选取文本框内容

        // 执行浏览器复制命令
        // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
        // Input要在正常的编辑状态下原生复制方法才会生效

        document.execCommand("copy");

        this.$toast('复制成功！')
        // 复制成功后再将构造的标签 移除
        document.body.removeChild(cInput);
    }
  },
}
</script>

<style lang="scss" scoped>
.bottom{
  width:100%;
  position:fixed;
  bottom: 0;
  color:#fff;
  text-align:center;
  display:flex;
  justify-content: space-around;
  background-color: #fff;
  padding:10px 0;
  z-index:10;
  .phone,.location{
    width: 166px;
    line-height: 46px;
    border-radius: 36px 36px 36px 36px;
  }
  .phone{
    background: #FF9C60;
    a{
      display: block;
      color:#fff;
    }
  }
  .location{
    background:#72a9ff;
  }
}
</style>